<template>
  <el-dialog
    title="添加评价"
    top="10vh"
    :visible.sync="dialogVisible"
    close-on-press-escape
    :before-close="cancel"
  >
    <div class="assess-container" style="padding: 10px;">
      <el-form
        ref="assess"
        :model="assess"
        class="form-container"
        :rules="AddRules"
        label-width="80px"
      >
        <el-form-item label="评分" prop="score">
          <el-rate
            v-model="assess.score"
            :colors="colors"
          />
        </el-form-item>
        <el-form-item label="评价内容" prop="content">
          <el-input v-model="assess.content" type="textarea" />
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm('assess')">提交</el-button>
          <el-button style="float:right;" @click="cancel('assess')">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { addAssess } from '@/api/assess'
import { Message } from 'element-ui'
export default {
  name: 'AssessDialog',
  props: {
    dialogVisible: Boolean,
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      assess: {
        score: null,
        content: ''
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      AddRules: { // 对话框表单验证
        score: [{ required: true, message: '请选择分数', trigger: 'blur' }],
        content: [{ required: true, message: '请输入评价内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.assess.orderId = this.id
          this.assess.customer = this.$store.getters.name
          addAssess(this.assess).then(res => {
            if (res) {
              Message({
                message: res.data.message,
                type: 'success',
                duration: 5 * 1000
              })
              this.$refs[formName].resetFields()
              this.$emit('closeDialog')
            }
          })
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
      this.$refs.assess.resetFields()
    }
  }
}
</script>

<style lang="scss">

</style>
